<%--
  Created by IntelliJ IDEA.
  User: 袁帅强
  Date: 2020/11/23
  Time: 18:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/style/layui/layui.js"></script>
  </head>
  <body>
  <div id="min">
    <form class="layui-form" action="" id="adataform" lay-filter="ggg">
      <div class="layui-inline">
        <label class="layui-form-label" style="width: 10px">id</label>
        <div class="layui-input-inline">
          <input type="text"  name="id" autocomplete="off" class="layui-input">
        </div>
      </div>

      <div class="layui-inline">
        <label class="layui-form-label">部门名称</label>
        <div class="layui-input-inline">
          <input type="text"  name="name"  class="layui-input">
        </div>
      </div>


        <div class="layui-input-inline">
          <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo2">查询</button>
          <button type="reset" class="layui-btn layui-btn-primary" id="re">重置</button>
        </div>

    </form>
  </div>



  <table class="layui-hide" id="test" lay-filter="test"></table>
  <div id="max">
    <form class="layui-form" action="" id="dataform" lay-filter="fff">
      <div class="layui-form-item layui-hide">
        <div class="layui-inline">
          <label class="layui-form-label">id</label>
          <div class="layui-input-inline">
            <input type="text" name="id" id="id" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">部门名称</label>
          <div class="layui-input-inline">
            <input type="text" name="name" id="name" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-input-block">
          <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>


  <div id="caozuo" style="display: none">
    <input type="hidden" id="hid">
    <button id="one" class="layui-btn layui-btn-warm layui-btn-radius">解散</button>
    <button id="two" class="layui-btn layui-btn-danger layui-btn-radius" >恢复</button>
  </div>

  <script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>

    </div>
  </script>

  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <%--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>--%>
    {{# if(d.count>0) {}}
    <button  class="layui-btn layui-btn-disabled layui-btn-xs">操作</button>
    {{# }else{ }}
    <button lay-event="caozuo" class="layui-btn layui-btn-warm layui-btn-xs">操作</button>
    {{# } }}
  </script>



  <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

  <script>
    layui.use(['table','layer','jquery','util'], function(){
      var table = layui.table;
      var layer=layui.layer;
      var $=layui.jquery;
      var util=layui.util;
      var form=layui.form;
      $("#max").hide();
      table.render({
        elem: '#test'
        ,url:'${pageContext.request.contextPath}/dept/queryAll'
        ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
        ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
          title: '提示'
          ,layEvent: 'LAYTABLE_TIPS'
          ,icon: 'layui-icon-tips'
        }]
        ,title: '用户数据表'
        ,cols: [[
          {field:'id', title:'ID',  fixed: 'left', unresize: true, sort: true}
          ,{field:'name', title:'部门名称'}
          ,{field:'status', title:'部门状态',templet:function (data){
            if (data.status==0){
              return "正常";
            }else {
              return "已解散";
            }
            }}
          ,{field:'count', title:'人数',templet:function (data){
            if (data.count==null){
              return 0;
            }else {
              return data.count;
            }
            }}
          ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
        ]]
        ,page: true
        , done: function (res, curr, count) {
          var that = this.elem.next();
          res.data.forEach(function (item, index) {
            if (item.status === 1) {
              var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");
              tr.css("background-color", "gray");//目标单元格颜色
              tr.css("color", "white");//被选中的单元格字体颜色 ：后勤部
            }
          });
        }, parseData: function (res) {
          if (res.code == -1) {
            layuiHelp.AlertMsg(res.msg, res.icon);
          }
        }

      });

      //头工具栏事件
      table.on('toolbar(test)', function(obj){
        switch(obj.event){
          case 'add':
            add();
            break;
        };
      });


      form.on('submit(demo2)',function (data){

        table.reload("test",{
          page:{
            curr:1
          },where:data.field
        })
        return false;
      })
      $("#re").click(function (){
        location=location;
      })



      //监听行工具事件
      table.on('tool(test)', function(obj){
        var data = obj.data;
        //console.log(obj)
        if(obj.event === 'del'){

          layer.confirm('真的删除行么', function(index){

           $.ajax({
             url:"${pageContext.request.contextPath}/dept/del"
             ,data:data
             ,type:"post"
             ,success:function (d){
                if (d>0){
                  layer.msg("删除成功");
                  layer.close(index);
                  table.reload("test",{
                    page: {
                      curr:1
                    }
                  })
                }
             }
           })
          });
        } else if(obj.event === 'edit'){

            layer.open({
              type:1,
              area:['400px','200px'],
              offset:'100px',
              content:$("#max")
            });
            form.val("fff",{
              "id":data.id,
              "name":data.name
            });

          form.on('submit(demo1)', function(data){

            $.ajax({
              url:"${pageContext.request.contextPath}/dept/upd",
              data:data.field,
              success:function (d){
                if (d>0){
                  layer.msg("编辑成功")
                }

              },error:function (){
                alert(555)
              }
            })

            layer.closeAll();
            table.reload("test",{
              page: {
                curr:1
              }
            })
            return false;
            })
        }else if (obj.event === 'caozuo') {
          /*confirmTrans: function(){*/
          //配置一个透明的询问框
          layer.msg('', {
            content: $("#caozuo"),
            closeBtn: 1,
            time: 10000,
            cancel: function () {
              location = location;
            },
            success: function () {

              $("#hid").val(data.id)
            }
          });
        }
      });

      $("#one").click(function (){
        var id=$("#hid").val();
        /* layer.closeAll();*/
        $.ajax({
          url:"${pageContext.request.contextPath}/dept/bad",
          data:{id:id},
          async:false,
          success:function (d){
            if (d>0){
              layer.msg("已解散")
            }
          },error:function (){
            alert(55)
          }
        })
        setTimeout(function() {
          window.location.reload();
        },400);
      })

      $("#two").click(function (){
        var id=$("#hid").val();

        /* layer.closeAll();*/
        $.ajax({
          url:"${pageContext.request.contextPath}/dept/good",
          data:{id:id},
          async:false,
          success:function (d){
            if (d>0){
              layer.msg("已恢复");
            }
          }
        })
        setTimeout(function() {
          window.location.reload();
        },400);
      })



      //新增
      function add() {
        layer.open({
          type:1,
          area:['400px','200px'],
          offset: '100px',
          content: $("#max"),
          success:function (){
            $("#dataform")[0].reset();
          }
        })

        form.on('submit(demo1)',function (){
          /*alert(123)*/
          var tem=$("#dataform").serialize();
          //var id=$("#id").val();
          //var name=$("#name").val();
          $.ajax({
            url:"${pageContext.request.contextPath}/dept/add",
            data:tem,
            type:"post",
            dataType:"json",
            success:function (d){
              if (d>0){
                layer.msg("添加成功");
              }
            },error:function (){
              alert("ddd")
            }
          })
          layer.closeAll();
          table.reload("test",{
            page:{
              curr:1
            }
          })
          return false;
        })
      }
    });
  </script>

  </body>
</html>
